<template>
  <div class="permission">
    <el-card>
      <!-- 搜索重置 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="username"
            placeholder="请输入..."
            style="width: 310px;"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getPermisList" class="serch"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" class="el-icon-edit adduser" @click="addpermi"
        >新增权限组</el-button
      >
      <el-alert :title="`共${counts}条记录`" type="info" show-icon> </el-alert>
      <el-table
        class="table"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="用户名" width="250" prop="title">
        </el-table-column>
        <el-table-column prop="create_date" label="日期" width="250">
        </el-table-column>
        <el-table-column label="操作" width="400" show-overflow-tooltip>
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editPermi(scope.row.id)"
              >编辑</el-button
            >
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="dellPer(scope.row.id)"
              >删除</el-button
            ></template
          >
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 8, 10, 20]"
          :page-size="pagesize"
          :total="counts"
          layout="sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 新增用户对话框 -->
    <el-dialog
      title="创建权限组"
      :visible.sync="addper"
      @close="addDialogClosed"
    >
      <el-form
        label-width="150px"
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            autocomplete="off"
            style="width:350px"
            v-model="addForm.username"
          ></el-input>
        </el-form-item>
        <div class="addtree">
          <span>权限分配</span>
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[1]"
            :props="defaultProps"
          >
          </el-tree>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addper = false">取 消</el-button>
        <el-button type="primary" @click="addMiss">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑用户对话框  -->
    <el-dialog title="编辑权限组" :visible.sync="editper">
      <el-form label-width="150px" :model="editPermiss">
        <el-form-item label="用户名" prop="username">
          <el-input
            autocomplete="off"
            style="width:350px"
            v-model="editPermiss.username"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="addtree">
        <span>权限分配</span>
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[1]"
          :default-checked-keys="[1]"
          :props="defaultProps"
        >
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editper = false">取 消</el-button>
        <el-button type="primary" @click="editPer">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { permissions, dellPer, idPermi, addPer, editPerMi } from "@/api/base";
export default {
  name: "BasePermissionsIndex",
  data() {
    return {
      page: 1,
      pagesize: 5,
      username: "",
      tableData: [],
      counts: 0,
      addper: false,
      editper: false,
      addForm: {
        username: "",
      },
      editPermiss: {
        username: "",
      },
      addFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "用户名的长度在 3 到 10 个字符之间",
            trigger: "blur",
          },
        ],
      },
      data: [
        {
          id: 1,
          label: "系统菜单和页面权限点",
          children: [
            {
              id: 2,
              label: "后台框架",
              children: [
                {
                  id: 3,
                  label: "用户管理",
                  children: [
                    {
                      id: 4,
                      label: "用户新增",
                    },
                    {
                      id: 5,
                      label: "用户搜索",
                    },
                    {
                      id: 6,
                      label: "用户列表",
                    },
                    {
                      id: 7,
                      label: "用户分页",
                    },
                  ],
                },
                {
                  id: 8,
                  label: "菜单管理",
                },
                {
                  id: 9,
                  label: "权限管理",
                },
                {
                  id: 10,
                  label: "日志管理",
                },
              ],
            },
            {
              id: 11,
              label: "列表页",
              children: [
                {
                  id: 11,
                  label: "查询表格",
                  children: [
                    {
                      id: 12,
                      label: "查询",
                    },
                    {
                      id: 13,
                      label: "添加",
                    },
                    {
                      id: 14,
                      label: "列表",
                    },
                  ],
                },
                {
                  id: 15,
                  label: "标准列表",
                },
                {
                  id: 16,
                  label: "卡片列表",
                },
              ],
            },
            {
              id: 17,
              label: "表单页",
              children: [
                {
                  id: 18,
                  label: "基础表单",
                },
                {
                  id: 19,
                  label: "分布表单",
                },
                {
                  id: 20,
                  label: "高级表单",
                },
              ],
            },
            {
              id: 21,
              label: "详情页",
              children: [
                {
                  id: 22,
                  label: "基础详情页",
                },
                {
                  id: 23,
                  label: "高级详情页",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  created() {
    this.getPermisList();
  },
  methods: {
    async getPermisList() {
      try {
        const { data } = await permissions({
          page: this.page,
          pagesize: this.pagesize,
          title: this.username,
        });
        this.tableData = data.list;
        this.counts = data.counts;
      } catch (err) {
        this.$message.error("获取失败");
      }
    },

    reset() {
      this.username = "";
    },

    addpermi() {
      this.addper = true;
    },
    async dellPer(id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);

      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      try {
        const { data } = await dellPer(id);
        this.getPermisList();
        this.$message.success("删除成功");
      } catch (err) {
        this.$message.error("删除失败");
      }
    },
    async editPermi(id) {
      this.editper = true;
      const { data } = await idPermi(id);
      this.editPermiss = data;
    },
    handleSizeChange(newSize) {
      this.pagesize = newSize;
      this.getPermisList();
    },
    handleCurrentChange(newPage) {
      this.page = newPage;
      this.getPermisList();
    },
    async addMiss() {
      try {
        const { config } = await addPer({
          title: this.addForm.username,
          permissions: [0, 28, 29, 44, 46, 47],
        });

        const datas = JSON.parse(config.data);
        this.addForm.username = datas.title;
        this.addper = false;
        this.getPermisList();
        this.$message.success("添加成功");
      } catch (err) {
        this.$message.error("添加失败");
      }
    },
    async editPer() {
      try {
        const { config } = await editPerMi(this.editPermiss.id, {
          id: this.editPermiss.id,
          title: this.editPermiss.username,
          permissions: [1, 5, 9, 7, 2],
        });
        const datas = JSON.parse(config.data);
        this.editPermiss.username = datas.title;
        this.getPermisList();
        this.editper = false;
        this.$message.success("编辑成功");
      } catch (err) {
        this.$message.error("编辑失败");
      }
    },
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
  },
};
</script>

<style lang="less" scope>
.permission {
  position: relative;
  .serch {
    margin-left: -24px;
    margin-bottom: 30px;
  }
  .adduser {
    position: absolute;
    right: 42px;
    top: 70px;
    z-index: 2222;
  }
  .table {
    margin-top: 10px;
  }
  .block {
    margin-top: 5px;
  }
  .el-dialog {
    border-radius: 10px;
    .el-dialog__header {
      background-color: rgb(64, 158, 255);
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      .el-dialog__title {
        color: #fff;
      }
    }
  }
  .el-card {
    margin: 20px;
    min-width: 900px;
  }
  .addtree {
    margin-left: 90px;
    .el-tree {
      margin-left: 70px;
    }
  }
}
</style>
